<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="/js/jquery.min.js"></script>
    <script src="http://localhost:8080/socket.io/socket.io.js"></script>
    <title>chatRoom</title>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    #page {
        width: 475px;

        margin: 10px auto;
        border: 1px solid gray;
        height: 700px;
        position: relative;
    }

    h5 {
        text-align: center;
        color: orange;
    }

    #talk_style {
        position: absolute;
        bottom: 0px;
        left: 0px;
    }

    #talk_style>input {
        width: 400px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        font-size: 20px;
    }

    #msg {
        width: 475px;
    }

    #msg ul li {
        list-style: none;
        width: 455px;
        margin-left: 10px;
    }

    .join_style {
        color: red;
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid #f2f2f2;
    }

    li>label {
        margin-left: 10px;
        color: gray;
    }

    li>span {
        margin-left: 10px;
        color: #000;
    }

    .mine {
        text-align: right;
    }

    #login {
        width: 475px;
        margin: 20px auto;
    }

    #login input {
        width: 475px;
        height: 40px;
        font-size: 20px;
        border-radius: 10px;
    }

    #login div {
        margin-top: 10px;
        text-align: center;
        background: orange;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        border-radius: 10px;
    }
    </style>
</head>

<body>
    <div id="login">
        <input id="login_name" type="text" name="" placeholder="userName">
        <input id="login_password" type="text" name="" placeholder="password">
        <div id="log">登陆</div>
    </div>
    <div id="page">
        <h5>welcome to guangming chatRoom</h5>
        <div id="msg">
            <ul>
            </ul>
        </div>
        <div id="talk_style">
            <input type="text" name="" id="talk">
            <label onclick="subAction()">提交</label>
        </div>
    </div>
    <script>
    $(function() {
        $("#page").hide();
    })
    var user={};
    $("#log").click(function() {
        var name = $("#login_name").val();
        var password = $("#login_password").val();
        $.ajax({
            method: "GET",
            url: "/login?name="+name+"&password="+password,
            async: false,
            success: function(data) {
                console.log(data);
                user=data.obj[0];
                 $("#login").hide();
                 $("#page").show();
             login();
            },
            error: function(err) {
                console.log(err)
            }
        })
    })
    var socket;

    function login(msg) {
        // ---------创建连接-----------
        socket = io.connect('http://127.0.0.1:8080');
        // 加入房间
        socket.on('connect', function() {
            socket.emit('join', user);
        });
        // 监听系统消息
        socket.on('login', function(data) {
            console.log(data);
            $("#msg ul").append('<li class="join_style">' + data.msg + '</li>')

        });
        //告诉服务器端有用户登录
        socket.emit('login', {
            username: msg
        });
        socket.on("login", function(data) {
            console.log(data)

        })
        socket.on("talk", function(data) {
            console.log(data);
            if (data.username == user.name) {
                $("#msg ul").append('<li class="nomal"><label>' + data.username + ' :</label><span>' + data.content + '</span></li>')
            } else {
                $("#msg ul").append('<li class="mine"><span>' + data.content + ' :</span><label>' + data.username + '</label></li>')
            }
        })
    }

    function subAction(msg) {
        var input = document.getElementById("talk");
        var name = input.value;

        socket.emit('talk', {
            content: $("#talk").val(),
            username: user.name
        });
        $("#talk_style input").val("")
    }
    </script>
</body>

</html>